<template>
	<view>
		<!-- 弹窗遮罩 -->
		<view v-if="show" class="popup-mask" @tap="close"></view>

		<!-- 弹窗内容 -->
		<view v-if="show" class="popup-container" :class="{ 'popup-show': show }">
			<view class="popup-content">
				<!-- 标题 -->
				<view class="popup-header">
					<text class="popup-title">{{ title }}</text>
					<uni-icons type="close" size="24" color="#999" @click="close" class="close-icon"></uni-icons>
				</view>

				<!-- 输入框 -->
				<view class="input-section">
					<text class="input-label">{{ label }}</text>

					<view class="popup-input-box">
						<input class="popup-input" :type="inputType" :placeholder="placeholder" :maxlength="maxlength"
							v-model="inputValue" :focus="autoFocus" @confirm="confirm" />
						<button class=" btn-primary" @click="handleScanWeigh">
							<uni-icons type="scan" size='mini' color="#fff"></uni-icons>
						</button>
					</view>

					<text class="word-count" v-if="showWordCount">{{ inputValue.length }}/{{ maxlength }}</text>
				</view>

				<!-- 按钮组 -->
				<view class="button-group">
					<button class="btn btn-cancel" @click="close">
						{{ cancelText }}
					</button>
					<button class="btn btn-confirm" :disabled="!inputValue" :class="{ 'btn-disabled': !inputValue }"
						@click="confirm">
						{{ confirmText }}
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import scanCodeUtils from '@/utils/scanCodeUtils';
	export default {
		name: "showInputPop",
		props: {
			// 是否显示弹窗
			show: {
				type: Boolean,
				default: false
			},
			// 弹窗标题
			title: {
				type: String,
				default: '请输入'
			},
			// 输入框标签
			label: {
				type: String,
				default: '内容'
			},
			// 输入框占位符
			placeholder: {
				type: String,
				default: '请输入内容'
			},
			// 输入框类型
			inputType: {
				type: String,
				default: 'text'
			},
			// 最大输入长度
			maxlength: {
				type: Number,
				default: 50
			},
			// 取消按钮文字
			cancelText: {
				type: String,
				default: '取消'
			},
			// 确认按钮文字
			confirmText: {
				type: String,
				default: '确定'
			},
			// 是否显示字数统计
			showWordCount: {
				type: Boolean,
				default: true
			},
			// 是否自动聚焦
			autoFocus: {
				type: Boolean,
				default: true
			},
			// 默认值
			defaultValue: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				inputValue: ''
			};
		},
		watch: {
			show(newVal) {
				if (newVal) {
					this.inputValue = '';
					this.inputValue = this.defaultValue;
				}
			},
			defaultValue(newVal) {
				this.inputValue = newVal;
			}
		},
		methods: {
			// 关闭弹窗
			close() {
				this.$emit('close');
			},

			handleScanWeigh() {
				console.log('scanCode')
				scanCodeUtils().then(res => {
					console.log(res)
					this.inputValue = res.code
				}).catch(err => {
					console.log(err)
					toast(err.message || '扫码失败')
				})

			},
			confirm() {
				if (!this.inputValue.trim()) {
					uni.showToast({
						title: '请输入内容',
						icon: 'none'
					});
					return;
				}
				this.$emit('confirm', this.inputValue);
			}
		}
	}
</script>

<style scoped>
	.popup-input-box {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.btn-primary {
		background: #007AFF;
		color: white;
		margin-left: 10rpx;
		height: 88rpx;
		width: 88rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}


	/* 遮罩层 */
	.popup-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 998;
	}

	/* 弹窗容器 */
	.popup-container {
		position: fixed;
		top: 38%;
		left: 50%;
		transform: translate(-50%, -50%) scale(0.8);
		width: 90%;
		max-width: 800rpx;
		background: #fff;
		border-radius: 16rpx;
		z-index: 999;
		opacity: 0;
		transition: all 0.3s ease;
	}

	.popup-show {
		transform: translate(-50%, -50%) scale(1);
		opacity: 1;
	}

	/* 弹窗内容 */
	.popup-content {
		padding: 40rpx;
	}

	/* 头部 */
	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 40rpx;
	}

	.popup-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}

	.close-icon {
		padding: 10rpx;
	}

	/* 输入区域 */
	.input-section {
		margin-bottom: 40rpx;
	}

	.input-label {
		display: block;
		font-size: 28rpx;
		color: #666;
		margin-bottom: 20rpx;
	}

	.popup-input {
		width: 100%;
		height: 88rpx;
		padding: 0 20rpx;
		border: 2rpx solid #e0e0e0;
		border-radius: 8rpx;
		font-size: 28rpx;
		background: #f8f8f8;
		box-sizing: border-box;
	}

	.popup-input:focus {
		border-color: #007AFF;
		background: #fff;
	}

	.word-count {
		display: block;
		text-align: right;
		font-size: 24rpx;
		color: #999;
		margin-top: 10rpx;
	}

	/* 按钮组 */
	.button-group {
		display: flex;
		justify-content: space-between;
		gap: 20rpx;
	}

	.btn {
		flex: 1;
		height: 80rpx;
		line-height: 80rpx;
		border: none;
		border-radius: 8rpx;
		font-size: 28rpx;
		transition: all 0.3s;
	}

	.btn-cancel {
		background: #f8f8f8;
		color: #666;
	}

	.btn-cancel:active {
		background: #e0e0e0;
	}

	.btn-confirm {
		background: #007AFF;
		color: #fff;
	}

	.btn-confirm:active {
		background: #0056cc;
	}

	.btn-disabled {
		background: #ccc;
		color: #999;
	}
</style>